import { Outlet, useNavigate } from "react-router-dom";
import React, { useEffect } from "react";
import classNames from "classnames";
import { TabBar } from "antd-mobile";
import {
  BillOutline,
  CalculatorOutline,
  AddCircleOutline,
} from "antd-mobile-icons";
import { useDispatch } from "react-redux";
import { getList } from "./redux/modules/billStore";
import "./index.scss";
function App() {
  const tabs = [
    {
      key: "/caseText",
      title: "月度账单",
      icon: <BillOutline />,
    },
    {
      key: "/caseText/new",
      title: "记账",
      icon: <CalculatorOutline />,
    },
    {
      key: "/caseText/year",
      title: "年度账单",
      icon: <AddCircleOutline />,
    },
  ];

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getList());
  }, [dispatch]);
  const navigator = useNavigate();
  const switchRoute = (path) => {
    navigator(path);
  };
  return (
    <div className={classNames("layout")}>
      <div className="container">
        <Outlet />
      </div>
      <div className="footer">
        <TabBar onChange={switchRoute}>
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  );
}
export default App;
